<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                        <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
              -->
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">流程实例:</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" v-model="searchForm.instanceId" placeholder="请输入">
                            </div>
                            <label class="col-form-label">业务Key:</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" v-model="searchForm.businessKey" placeholder="请输入">
                            </div>
                            <label class="col-form-label">任务:</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" v-model="searchForm.taskId" placeholder="请输入">
                            </div>
                            <label class="col-form-label">任务名称:</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" v-model="searchForm.taskName" placeholder="请输入">
                            </div>                                                      
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">节点:</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" v-model="searchForm.taskDefKey" placeholder="请输入">
                            </div>  
                            <label class="col-form-label">流程定义:</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" v-model="searchForm.procDefId" placeholder="请输入">
                            </div>
                            <label class="col-form-label">审批状态:</label>
                            <div class="col-md-2">
                                <el-select v-model="searchForm.behavior" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option v-for="item in btnList" 
                                        :key="item.behavior" 
                                        :label="item.label_"
                                        :value="item.behavior">
                                    </el-option>
                                </el-select>
                            </div>
                            <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2"
                                @click="search()"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                            <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2" @click="resetAll()">
                                <span><span>清空条件</span></span></b-button>
                        </div>
                    </div>
                    <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid">
                            <div class="row">
                                <div class="col m--align-left">
                                    
                                </div>
                                <div class="col m--align-right">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
                :data="dataList">
                <!-- 复选框 -->
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column label="序号" width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="taskName" show-overflow-tooltip label="任务名称"></el-table-column>
                <el-table-column align="left" prop="taskDefKey" show-overflow-tooltip label="节点"></el-table-column>
                <el-table-column align="left" prop="procDefId" show-overflow-tooltip label="流程定义"></el-table-column>
                <el-table-column align="left" prop="procInstId" show-overflow-tooltip label="流程实例"></el-table-column>                
                <el-table-column align="left" prop="taskId" show-overflow-tooltip label="任务"></el-table-column>
                <el-table-column align="left" prop="comment" show-overflow-tooltip label="审批内容"></el-table-column>
                <el-table-column align="left" prop="createTime" show-overflow-tooltip label="审批时间"></el-table-column>
                <el-table-column align="center" prop="createBy" label="审批人" min-width="150"></el-table-column>
                <el-table-column align="center" prop="behavior" :formatter="formatBehavior" label="批审状态" width="180"></el-table-column>
                <el-table-column align="center" prop="behaviorText" label="行为"></el-table-column>
                <el-table-column align="center" label="操作" fixed="left" min-width="100">
                    <template slot-scope="scope">
                        <button class="btn btn-light-info font-weight-bold" title="撤回" @click="callBack(scope.row)"><i class="fa flaticon-reply"></i>撤回</button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating ,dateformat} from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            btnList:[],
            searchForm: { instanceId: "" ,businessKey:"",taskId:"",taskName:"",taskDefKey:"",procDefId:"",behavior:"",},
            dataList: [],
            sels: [], //当前选框选中的值
            pageNo: 1,      // 默认当前是第一页
            pageSize: 5,    // 当前每页的数据是5条
            totalCount: 0   // 总数默认为0
        }
    },
    components: {
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "已办事项" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
        this.initBtnList();
    },
    methods: {
        initList() {
            showWating({ renderBody: "tableBody" });
            var params = {};
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_WORKFLOW_API + "/lcApproval/list", params).then(({ data }) => {
                this.dataList = data.data;//给结果集赋值
                this.totalCount = data.total;// 获取当前数据的总数    
            });
        },
        formatterCreateTime(row, column){
            return dateformat(row.createTime);
        },
        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
            console.log("选中的值", sels.map((item) => item.id));
        },
        
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        formatBehavior(row) {
            let data = row.behavior;
            if (data == 0) {
                return "提交";
            }
            if (data == 10) {
                return "通过";
            }
            if (data == 20) {
                return "驳回";
            }
            if (data == 30) {
                return "弃权";
            }
            if (data == 40) {
                return "撤回";
            }
            if (data == 50) {
                return "终止流程";
            }
            if (data == 60) {
                return "执行跳转";
            }
            if (data == 70) {
                return "转办";
            }
            if (data == 80) {
                return "委派";
            }
            if (data == 90) {
                return "加签";
            }
            if (data == 100) {
                return "催办";
            }
            if (data == 110) {
                return "设置归属人";
            }
            if (data == 120) {
                return "挂起";
            }
            if (data == 130) {
                return "激活";
            }
            return "缺省";
        },
        initBtnList(){
            let params = {};
            apiUtil.get(process.env.VUE_APP_WORKFLOW_API + "/lcBtn/collections", params).then(({ data }) => {
                this.btnList = data.data;
            });
        },
        callBack(row){//撤回
            let taskId = row.taskId;
            this.$bvModal.msgBoxConfirm("确定撤回流程？", {
                title: '提示',
                size: 'sm',
                buttonSize: 'sm',
                okVariant: 'success',
                okTitle: '确定',
                cancelTitle: '取消',
                headerClass: 'p-2 border-bottom-0',
                footerClass: 'p-2 border-top-0',
                hideHeaderClose: false,
                centered: true
            }).then(value => {
                if(value){
                    let params = {taskId:taskId};
                    apiUtil.post(process.env.VUE_APP_WORKFLOW_API + "/lcTask/globalForceCallBack",params).then(data => {
                        if (data.data.success) {
                            handleAlert("操作成功", "success", 3);
                            this.search();
                        } else {
                            handleAlert("操作失败", "error", 3);
                        }
                    });
                }                
            }).catch(err => {               
            })  
        },
    },
};
</script>